<template>
  <div class="container">
<!--    <van-list-->
<!--      v-model="loading"-->
<!--      :finished="finished"-->
<!--      finished-text="没有更多了"-->
<!--      @load="getByParam"-->
<!--    >-->
<!--      <div class="items">-->
<!--        <div class="item" @click="toDetail(item.id)" v-for="item in list" >-->
<!--          <img class="img" :src="item.imgUrl" :onerror="errorimg"/>-->
<!--          <div class="title" >{{item.title}}-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </van-list>-->
    <div id="scroll" v-infinite-scroll="getByParam" style="overflow:auto;height:100%" infinite-scroll-distance="30" infinite-scroll-delay="500"
         infinite-scroll-immediate="false"
         :infinite-scroll-disabled="finished">
      <div style="display: flex;flex-wrap: wrap;background-color: white;">
        <div @click="toDetail(item.id)" v-for="item in list" style="border:1px dotted #dedede;width:50%;    box-sizing: border-box;
            -webkit-box-sizing: border-box;padding:30px 20px 20px 20px;position: relative;
            -moz-box-sizing: border-box; display: flex;flex-direction: column;justify-content: center;align-items: center">
          <img style="width:90%;height:200px" :src="item.imgUrl" :onerror="errorimg"/>
          <div class="title">{{item.title}}
          </div>
          <div class="score">{{item.scoreDouban|scoreFilter}}</div>
        </div>
      </div>
      <div v-if="loading" style="text-align: center;padding:8px;color:#919191;font-size: 14px">加载中...</div>
      <div v-if="finished" style="text-align: center;padding:8px;color:#919191;font-size: 14px">没有更多了</div>
      <div v-if="err" @click="getByParam" style="text-align: center;padding:8px;color:#919191;font-size: 14px">
        加载失败，点击重试
      </div>
    </div>
  </div>
</template>

<script>
  import {getByParam} from '@/api/movie'
  import Pagination from '@/components/Pagination'

  export default {
    name: 'Search',
    components: {Pagination},
    filters: {
      scoreFilter(score) {
        if (score === null || score === '') {
          return "未知";
        } else {
          return score;
        }
      }
    },
    data() {
      return {
        errorimg: 'this.src="' + require('@/assets/err_img.png') + '"',
        finished: false,
        loading: true,
        err:false,
        keyword: null,
        query: {
          curPage: 1,
          pageSize:10,
          isLow: null,
          isExpired: false,//只查云盘链接可用的
          title: null
        },
        total: 0,
        list: []
      }
    },
    computed: {},
    watch: {
      '$route': {
        handler(to) {
          if(to.path!=="/search"){
            return;
          }
          console.log("触发了")
          this.finished = false;
          // to：目标路由对象
          this.query.title = to.query.title;
          console.log("改变了query:",this.query.title)
          this.list = [];
          this.query.curPage = 1;
          this.getByParam();
        }
      }
    },
    created() {
      console.log("创建的查询")
      this.query.title = this.$route.query.title
      console.log("query:",this.query.title)
      this.list = [];
      this.query.curPage = 1;
      this.finished = false;
      this.getByParam();
    },


    methods: {

      getByParam() {
        // let tips = this.$toast.loading("加载中")

        getByParam(this.query).then(r1 => {
          // tips.clear();
          this.query.curPage++;
          this.list = this.list.concat(r1.data.records);
          this.loading = false;
          console.log("数据",r1.data);
          // 数据全部加载完成
          if (this.list.length >= r1.data.total) {
            this.finished = true;
          }
          this.total = r1.data.total;
        }).catch(error => {
          // tips.clear();

          this.loading = false;
          console.log("失败",error)
        })
      },

      toDetail(id) {
        this.$router.push({path: '/movie/detail/' + id})

      }
    }
  }
</script>

<style scoped>
  .items{
    display: flex;flex-wrap: wrap;background-color: white;
  }
  .img{
    width:90%;height:200px;
  }
  .item {
    border:1px dotted #dedede;width:50%;    box-sizing: border-box;
    -webkit-box-sizing: border-box;padding:30px 20px 20px 20px;
    -moz-box-sizing: border-box; display: flex;flex-direction: column;justify-content: center;align-items: center
  }
  .title{
    width:100%;overflow: hidden;
    white-space: nowrap;text-align: center;margin-top: 20px;
    text-overflow: ellipsis;
  }

  .container {
    height: calc(100vh - 60px);
    background-color: white;
    margin-top: 60px;
  }
  .score {
    font-size: 16px;
    position: absolute;
    right: 30px;
    top: 205px;
    background-color: #99CC33;
    color: white;
    width: 50px;
    border-radius: 10px;
    text-align: center;
    height: 22px;
    line-height: 22px;
  }
  .title{
    margin-top: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width: 100%;
    text-align: center;
    overflow: hidden;
    height:40px;
  }
</style>
